/**
 * @author zhangqiang
 * @date   17/7/20
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'
import {Progress} from '../../components/common/process'
import OrderList from '../../components/payment/index'
import config from '../../config'
import {Toast,Modal} from 'antd-mobile'
import {payMent,weixinQuery} from '../../actions/paymentActions'
import '../../../styles/payment.scss'
import common from '../../utils/common'
import style from './index.scss'

const alert = Modal.alert;

class Payment extends Component {
	constructor(props) {
		super(props);
		this.state={
			payType: this.props.payTypes[0], //默认支付类型
			payTypes: [],//支付类型
			data: [],
			chargeOrderId: '',
			isIPhoneHideWX: false
		}
	}

	toUrl(url) {
      	this.context.router.replace(url);
	}
	/** 
	 *  微信支付回调查询用户是否支付
	*/
	weixinNewsCallback(){
		weixinQuery(sessionStorage.getItem('wxData'),sessionStorage.getItem('forwardUrl'))
		sessionStorage.removeItem('weixinPay')
		sessionStorage.removeItem('wxData')
		sessionStorage.removeItem('forwardUrl')
	}

	componentWillMount(){
		let checkout_success_data = JSON.parse(sessionStorage.getItem('checkout_success_data')); //下单成功后的信息
		/*
		*  如果是苹果手机隐藏微信支付选项
		* */
		if(common.isIPhone()){
			this.setState({
				isIPhoneHideWX: true
			})
		}
		this.setState({
			data: checkout_success_data
		})

		if(sessionStorage.getItem('payType')){
			this.setState({
				payType: JSON.parse(sessionStorage.getItem('payType'))
			})
		}


	}

	componentDidMount() {
		common.setViewTitle('订单确认');
		if(sessionStorage.getItem('weixinPay')){
			alert('', <div style={{fontSize: '.32rem'}}>请确定微信支付是否已完成
					<img onClick={()=>{
						common.closeAliModal()
						this.weixinNewsCallback()	//不用调到成功页				
					}} 
					className='maskClose' src="./images/icon-close.png" alt=""/>
				</div>, [
				{
					text: '已完成支付',
					onPress: () =>{
						this.weixinNewsCallback()
					},
					style: {color: 'red',fontSize: '.3rem'}
				},
				{ text: '支付遇到问题，重新支付', onPress: () => {
					sessionStorage.removeItem('weixinPay')
						this.orderPay()
				}, style: {color: '#333',fontSize: '.3rem'}},
				{ text: '取消支付', onPress: () => console.log('第0个按钮被点击了') ,style:{display: 'none'}},
			])
		}
	}

	componentWillUnmount() {
		sessionStorage.setItem('getRegionType',1)
	}

	/**
	 * 设置支付类型
	 * @param type 支付类型
	 */
	setPayType(type) {
		sessionStorage.setItem('payType',JSON.stringify(type))
		this.setState({
			payType: type
		})
	}

	//渲染支付方式
	renderPayTypes() {
		let isIPhoneHideWX;
		return this.props.payTypes.map((item, i) => {
				if(this.state.isIPhoneHideWX&&i==1){
					 isIPhoneHideWX = true;
				}
				return <div key={i} className={style.verCenter+' '+'border_bottom_1'} onClick={type => this.setPayType(item)} style={isIPhoneHideWX?{display:'none'}:{}}>
					<img className={style.pay_type_icon} src={item.icon}/>
					<div className={style.title}>{item.title}</div>
					<img className={style.pay_type_select_icon}
					     src={this.state.payType.name == item.name ? './images/select-true.png' : './images/select-false.png'}/>
				</div>
			}
		)
	}

	//渲染订单列表
	renderOrderList(){
		return this.state.data.endorseInfoList.map((item,i)=>{
			return <OrderList data={item} key={i+' '+i+1}/>
		})
	}

	orderPay(){
		let postData = {
			payType: this.state.payType.type,
			objStr: sessionStorage.getItem('pay_data')
		}
		this.props.dispatch(payMent(postData,(resultData)=>{
			sessionStorage.setItem('isShowChice',1)
			window.location.href = resultData;
		}))
	}

	render() {

		return (
			<div className={style.payment}>

				{/*订单状态-start-*/}
				<Progress/>
				{/*订单状态-end-*/}

				<div className={style.container}>
					{/*订单列表--start*/}
					{this.renderOrderList()}
					{/*订单列表-end-*/}
				</div>

				<div className={style.totaled+' '+'cf'}>
					<span>总计</span>
					<div>
						<span>￥{this.state.data.totalFee/100}</span>
					</div>
				</div>

				<div className={style.payType}>
					{
						this.renderPayTypes()
					}
				</div>
				<div style={{height: '1.24rem'}}></div>

				<div className={style.pay_button_box}>
					<div className={style.pay_money}>
						<span>总计：</span>
						<span>￥{this.state.data.totalFee/100}</span>
					</div>
					<button className={style.pay_button} onClick={()=>{this.orderPay()}}>立即支付</button>
				</div>
			</div>
		)
    }
}

//使用context
Payment.contextTypes = {
    router: React.PropTypes.object.isRequired
};

Payment.defaultProps = {
	payTypes: [
		{
			name: 'alipay',
			title: '支付宝支付',
			icon: './images/alipay-icon.png',
			type: '2',
		},
		{
			name: 'weixin',
			title: "微信支付",
			icon: './images/weixin-icon.png',
			type: '3',
		}
	],
};

function mapStateToProps(state) {
	return Object.assign({}, state.homeInfo);
}

export default connect(mapStateToProps)(Payment);
